<template>
    <div class="content">
        <el-dialog :visible.sync="modifyTrial.dialogFormVisible" title="审核操作" size="tiny" :before-close="handleClose" > 
            <div v-loading="loading">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-row type="flex" justify="center">
                        <el-form-item label="">
                            <el-radio class="radio" v-model="radio" label="1">通过</el-radio>
                            <el-radio class="radio" v-model="radio" label="2">驳回</el-radio>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-form-item v-if="Object.is(radio,'2')" label="" prop="textarea">
                            <el-input style="width:100%" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" :maxlength="30" placeholder="请输入驳回原因，不超过 30 个字。" v-model="form.textarea"></el-input>
                        </el-form-item>
                    </el-row>
                </el-form>
            <footer>
              <el-button @click="handleClose">取消</el-button>
              <el-button @click="add('form')" type="primary">确认</el-button>
            </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { recheck } from "api/settlemain";
export default {
  name: "trial",
  props: {
    modifyTrial: {}
  },
  created() {},
  data() {
    var filter = (rule, value, callback) => {
      var pattern = /\s/;
      if (pattern.test(value)) {
        callback(new Error("不允许输入空格"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      form: {
        textarea: ""
      },
      rules: {
        textarea: [
          { required: true, message: "请填写驳回原因", trigger: "blur" },
          {
            min: 3,
            max: 30,
            message: "长度为 3 到 30 个汉字",
            trigger: "blur"
          },
          {
            validator:filter,
            trigger: "blur"
          }
        ]
      },
      radio: "2"
    };
  },
  methods: {
    handleClose() {
      this.modifyTrial.dialogFormVisible = false;
    },
    add(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.radio === "1") {
            this.loading = true;
            this.form.textarea = "";
            // 通过并上线 初始化
            recheck(this.modifyTrial.pId, "1", this.form.textarea)
              .then(data => {
                this.loading = false;

                this.$message({
                  message: "恭喜你，通过成功！",
                  type: "success"
                });
                this.$emit("sortTrial", "成功");
                this.$store.dispatch("UpdateCache", true);
                this.modifyTrial.dialogFormVisible = false;
              })
              .catch(Error => {
                this.loading = false;
              });
          } else {
            // 驳回
            this.loading = true;
            recheck(this.modifyTrial.pId, "2", this.form.textarea)
              .then(data => {
                this.loading = false;
                this.$message({
                  message: "恭喜你，驳回成功！",
                  type: "success"
                });
                this.form.textarea = "";
                this.$emit("sortTrial", "驳回");
                this.$store.dispatch("UpdateCache", true);
                this.modifyTrial.dialogFormVisible = false;
              })
              .catch(Error => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
section,
footer {
  text-align: center;
}
.title {
  text-align: left;
  color: #999;
}
section {
  padding-bottom: 50px;
  el-button {
    margin-right: 20px;
  }
}
</style>
